<script setup lang="ts">
import {onMounted,computed} from 'vue';
import {navStore} from "@/store";
import router from "@/router";
const nav = navStore();
onMounted(() => {
  // nav.initNavList()
})
const navTreeList = computed(() => {
  return nav.getNavList
})
function pushRouter(path: string) {
  console.log('跳转到路由',path)
  router.push(path)
}
</script>

<template>
<div>
  <t-menu :collapsed="nav.getCollapsed" :data="navTreeList">
    <template v-for="item in navTreeList" :key="item.id">
      <!--有子菜单-->
      <t-submenu v-if="item.subNavList && item.subNavList.length" :value="item.id" :key="item.id" :title="item.navName">
        <template #icon>
          <t-icon :name="item.icon" />
        </template>
        <template #title>
          <span>{{ item.navName }}</span>
        </template>
        <template v-for="subItem in item.subNavList" :key="subItem.id">
          <t-submenu v-if="subItem.subNavList && subItem.subNavList.length" :value="subItem.id">
            <template #icon>
              <t-icon :name="subItem.icon" />
            </template>
            <template #title>
              <span>{{ subItem.navName }}</span>
            </template>
            <template v-for="subItem1 in subItem.subNavList" :key="subItem1.id">
              <t-menu-item :value="subItem1.id" :icon="item.icon" :title="item.navName" @click="pushRouter(subItem1.path)">
                <template #icon>
                  <t-icon :name="subItem1.icon" />
                </template>
                {{ subItem1.navName }}
              </t-menu-item>
            </template>
          </t-submenu>
          <t-menu-item v-else :value="subItem.id" @click="pushRouter(subItem.path)">
            <template #icon>
              <t-icon :name="subItem.icon" />
            </template>
            {{ subItem.navName }}
          </t-menu-item>
        </template>
      </t-submenu>
      <!--只有一级菜单-->
      <t-menu-item v-else :value="item.id" @click="pushRouter(item.path)">
        <template #icon>
          <t-icon :name="item.icon" />
        </template>
        {{ item.navName }}
      </t-menu-item>
    </template>
  </t-menu>
</div>
</template>

<style lang="less" scoped>
.t-demo-collapse-btn {
  color: #fff;
  &:hover {
    background-color: #4b4b4b;
    border-color: transparent;
    --ripple-color: #383838;
  }
}
</style>
